<template>
  <div class="wrapper">
    <header>
      <i class="fa fa-angle-left" @click="goBack"></i>
      <p>账户余额</p>
    </header>
    <div class="money-area">
      <h1>余额(元)</h1>
      <p>{{ moneyShow |numFilter}}</p>
      <div class="withdraw-area" @click="toWithdraw">
        <p>去提现</p>
        <i class="fa fa-angle-right"></i>
      </div>
    </div>
    <div class="recharge-area">
      <h1>余额账户充值</h1>
      <ul class="choose">
        <li @click="charge(10)">
          <p>10元</p>
        </li>
        <li @click="charge(30)">
          <p>30元</p>
        </li>
        <li @click="charge(100)">
          <div class="ad">特惠充值</div>
          <p>100元</p>
          <div class="promotion">

          </div>
        </li>
        <li @click="charge(200)">
          <p>200元</p>
        </li>
        <li @click="charge(300)">
          <div class="ad">特惠充值</div>
          <p>300元</p>
          <div class="promotion">

          </div>
        </li>
        <li @click="charge(amount)">
          <p>自定义金额</p>
          <input type="text" v-model="amount" placeholder="请输入金额" ref="cin" @keydown="normalizee" @click="clear">
        </li>
      </ul>
      <div class="confirm1" v-show="amount==0" @click="rechargeError">
        <p>确认充值</p>
      </div>
      <div class="confirm2" v-show="amount!=0" @click="recharge">
        <p>确认充值</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Recharge",
  data() {
    return {
      user: {},
      amount: 0,
      moneyShow: 0
    }
  },
  created() {
    this.user = this.$getSessionStorage('user');
    this.queryWallet();
  },
  filters: {
    numFilter(value) {
      // 截取当前数据到小数点后两位
      let realVal = parseFloat(value).toFixed(2);
      return realVal;
    },
  },
  methods: {
    //回退事件
    goBack() {
      this.$router.push({path: '/wallet'});
    },
    toWithdraw() {
      this.$router.push({path: 'withdraw'});
    },
    charge(amount) {
      this.amount = amount;
    },

    recharge() {
      //TODO
      this.$axios.post('rechargeWallet', this.$qs.stringify({
        userID:this.user.userId,
        AmountofMoney:this.amount
      })).then(response => {
        if (response.data != 1) {
          alert("充值失败！")
        } else {
          this.queryWallet();
        }
      }).catch(error => {
        console.error(error);
      });
      //重新查钱包余额
    },
    rechargeError() {
      alert("请选择金额");
    },
    normalizee() {
      // 通过正则过滤小数点后两位
      this.$refs.cin.value = (this.$refs.cin.value.match
      (/^\d*(\.?\d{0,1})/g)[0]) || null;
    },
    queryWallet() {
      //TODO
      this.$axios.get('queryWallet', {
        params: {
          userID: this.user.userId,
        }
      }).then(response => {
        this.moneyShow = response.data;
      }).catch(error => {
        console.error(error);
      });
    },
    clear() {
      this.$refs.cin.value = '';
    }
  }
}
</script>

<style scoped>
.wrapper {
  width: 100%;
  height: 100%;
}

.wrapper header {
  height: 10vw;

  display: flex;
  align-items: center;


  margin-top: 2vw;
}

.wrapper header .fa-angle-left {
  font-size: 5vw;
  font-weight: 500;

  margin-left: 2vw;
}

.wrapper header p {
  font-size: 4vw;
  font-weight: 600;

  margin-left: 4vw;
}

.wrapper .money-area {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;

  height: 50vw;
  margin-left: 3vw;
  margin-right: 3vw;

  border-bottom: solid 1px #d6d6d6;
}

.wrapper .money-area h1 {
  font-size: 3.5vw;
  font-weight: 300;
  margin-bottom: 1vw;
}

.wrapper .money-area p {
  font-size: 7vw;
  font-weight: 700;
  margin-bottom: 1vw;
}

.wrapper .money-area .withdraw-area {
  display: flex;
}

.wrapper .money-area .withdraw-area p {
  font-size: 3.5vw;
  font-weight: 300;
  margin-right: 1vw;
}

.wrapper .money-area .withdraw-area .fa-angle-right {
  font-weight: 100;
  color: #AEAEAE;
}

.wrapper .recharge-area {
  margin: 3vw 0 0 3vw;

}

.wrapper .recharge-area h1 {
  font-size: 4vw;
}

.wrapper .recharge-area .choose {
  display: flex;
  flex-wrap: wrap;
}

.wrapper .recharge-area .choose li {
  width: 31%;
  height: 20vw;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  position: relative;

  margin: 2vw 2vw 0 0;
  border-radius: 3px;
  background-color: #e6e6e6;
}

.wrapper .recharge-area .choose li p {
  font-size: 4vw;
}

.wrapper .recharge-area .choose li .ad {
  position: absolute;
  top: 0;
  left: 0;

  padding: 0 1vw 0 1vw;
  color: #ffffff;
  background-color: orangered;
  font-size: 2.5vw;
  border-radius: 3px 0 3px 0;
}

.wrapper .recharge-area .choose li input {
  width: 80%;
  margin-top: 2vw;
  border: solid 1px #ffffff;
  border-radius: 5px;

  cursor: pointer;
}

.wrapper .recharge-area .confirm1 {
  height: 10vw;

  display: flex;
  align-items: center;
  justify-content: center;

  margin: 12vw 3vw 0 0;
  border-radius: 20px;
  background-color: #c5c3c3;
}

.wrapper .recharge-area .confirm1 p {
  color: #ffffff;
  font-size: 4vw;
  font-weight: 600;
}

.wrapper .recharge-area .confirm2 {
  height: 10vw;

  display: flex;
  align-items: center;
  justify-content: center;

  margin: 12vw 3vw 0 0;
  border-radius: 20px;
  background-color: #359cff;
}

.wrapper .recharge-area .confirm2 p {
  color: #ffffff;
  font-size: 4vw;
  font-weight: 600;
}
</style>